<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>居民投递量统计</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px">
         <div>
            <div class="clearfix">
                <Col span="5"  class="mr-10">
                <sele @ProvinceData="childByValue"></sele>
							</Col>
                        <DatePicker v-model="queryData.startTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                        &nbsp;-&nbsp;
                        <DatePicker v-model="queryData.endTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
                <Select placeholder="请选择垃圾类型" :clearable=true v-model="queryData.code" style="width: 150px;margin:0 20px">
              <Option
                v-for="item in typeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
                </Select>
                 <Button
              type="primary"
              custom-icon="iconfont icon-chaxun"
              size="small"
              @click="inQuire"
              >查询</Button
            >
            </div>
        </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <!-- <Button-group>
              <Button
                custom-icon="iconfont icon-shanchusekuai"
                size="small"
                type="error"
                @click="batchDel"
              >
                删除
              </Button>
              <Button
                custom-icon="iconfont icon-fangkuai2"
                size="small"
                type="primary"
                @click="showCreateModal"
              >
                新建
              </Button>
            </Button-group> -->
          </div>
          <div class="normal-list-page-bd">
            <Table
              border
              :loading="list.loading"
              :columns="list.columns"
              :data="list.tableData"
              @on-selection-change="selectionChange"
            >
              <!-- <template slot-scope="{ row, index }" slot="action">
                <i-switch
                  size="large"
                  v-model="row.status"
                  style="margin-right: 5px"
                  @on-change="changeRow(row)"
                >
                  <span slot="open">运行</span>
                  <span slot="close">暂停</span>
                </i-switch>
                <Button
                  type="primary"
                  shape="circle"
                  icon="md-create"
                  style="margin-right: 5px"
                  @click="showUpdateModal(row)"
                ></Button>
                <Button
                  type="error"
                  shape="circle"
                  icon="md-trash"
                  style="margin-right: 5px"
                  @click="delData([row.id])"
                ></Button>
                <Button
                  type="warning"
                  shape="circle"
                  icon="md-arrow-dropright"
                  @click="runRow(row.id)"
                ></Button>
              </template> -->
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page
              class="fr"
              :total="queryData.totalRecord"
              :page-size="queryData.pageSize"
              :current="queryData.page"
              @on-change="changePage"
              @on-page-size-change="onPageSizeChange"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
          <!--新建&修改-->
          <Modal
            v-model="modal.task.isShow"
            :loading="modal.task.loading"
            :mask-closable="false"
            :title="modal.task.title"
            @on-ok="postData"
          >
            <Form
              ref="systemFrom"
              :model="modal.task.formData"
              :rules="modal.task.rules"
              :label-width="120"
            >
              <FormItem label="任务名称" prop="taskName">
                <Input
                  placeholder="请输入任务名称"
                  v-model="modal.task.formData.taskName"
                  style="width: 300px"
                />
              </FormItem>
              <FormItem label="任务描述" prop="taskDesc">
                <Input
                  placeholder="请输入任务描述"
                  v-model="modal.task.formData.taskDesc"
                  style="width: 300px"
                />
              </FormItem>
              <FormItem label="CRON表达式" prop="cornRule">
                <Input
                  placeholder="请输入CRON表达式"
                  v-model="modal.task.formData.cornRule"
                  style="width: 300px"
                />
              </FormItem>
              <FormItem label="请求地址" prop="sendUrl">
                <Input
                  placeholder="请输入请求地址"
                  v-model="modal.task.formData.sendUrl"
                  style="width: 300px"
                />
              </FormItem>
              <FormItem label="请求参数" prop="sendParam">
                <Input
                  placeholder="请输入请求参数"
                  v-model="modal.task.formData.sendParam"
                  style="width: 300px"
                />
              </FormItem>
              <FormItem label="请求方式" prop="sendType">
                <Select
                  v-model="modal.task.formData.sendType"
                  class="mr-10"
                  :clearable="flog"
                  style="width: 100px"
                >
                  <Option
                    v-for="item in modal.positionList"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.name }}</Option
                  >
                </Select>
              </FormItem>
            </Form>
          </Modal>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import gcUserApi from '@/api/gc/user.js'
import { Message } from 'iview'
import global from '@/assets/js/global'
import sele from '@/view/test/city.vue'
export default {
  name: 'user',
  components: { sele },
  data () {
    return {
      modal: {
        positionList: [
          { id: 'GET', name: 'GET' },
          { id: 'POST', name: 'POST' }
        ],
        task: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
            taskName: [
              {
                required: true,
                message: '请填写任务名称',
                trigger: 'blur'
              }
            ],
            taskDesc: [
              {
                required: true,
                message: '请填写任务描述',
                trigger: 'blur'
              }
            ],
            cornRule: [
              {
                required: true,
                message: '请填写CRON表达式',
                trigger: 'blur'
              }
            ],
            sendUrl: [
              {
                required: true,
                message: '请填写请求地址  ',
                trigger: 'blur'
              }
            ],
            sendParam: [
              {
                required: true,
                message: '请填写请求参数',
                trigger: 'blur'
              }
            ],
            sendType: [
              {
                required: true,
                message: '请选择请求方式',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 50,
            align: 'center'
          },
          /** 开始自动生成 */
          {
            title: '用户卡号',
            key: 'userId',
            align: 'center'
          },
          {
            title: '投递重量（kg）',
            key: 'weight',
            align: 'center'
          },
          {
            title: '户号',
            key: 'address',
            align: 'center'
          },
          {
            title: '小区',
            key: 'comminName',
            align: 'center'
          }

          /** 自动生成结束 */
        //   {
        //     title: '操作',
        //     align: 'center',
        //     minWidth: 250,
        //     fixed: 'right',
        //     slot: 'action'
        //   }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        startTime: this.oneMonth(),
        endTime: this.nowDate()
      },
      typeList: [
        {
          label: '可回收',
          value: 12
        }, {
          label: '易腐垃圾 ',
          value: 11
        }, {
          label: '其他垃圾 ',
          value: 13
        }, {
          label: '有毒有害 ',
          value: 14
        }
      ]
    }
  },
  mounted () {
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getTableData()
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      this.queryData.startTime = global.time(this.queryData.startTime)
      this.queryData.endTime = global.time(this.queryData.endTime)
      that.queryData.totalRecord = undefined
      gcUserApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.task.formData.id) {
            // 新建
            TaskListApi.add(that.modal.task.formData)
              .then((res) => {
                that.modal.task.loading = false
                if (!res.code) {
                  that.modal.task.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.task.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            this.modal.task.formData.id = this.modal.task.id
            TaskListApi.update(that.modal.task.id, that.modal.task.formData)
              .then((res) => {
                that.modal.task.loading = false
                console.log(that.modal.task.formData)
                if (!res.code) {
                  that.modal.task.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.task.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.task.loading = false
          that.$nextTick(() => {
            that.modal.task.loading = true
          })
        }
      })
    },
    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的任务吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          TaskListApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },
    // 开关
    changeRow (row) {
      console.log(row)
      this.modal.task.formData.id = row.id
      this.modal.task.formData = row
      TaskListApi.update(row.id, this.modal.task.formData)
        .then((res) => {
          if (!res.code) {
            this.getTableData()
            this.$Notice.success({
              title: '修改成功!'
            })
          } else {
            this.getTableData()
            this.$Notice.error({
              title: res.message
            })
          }
        })
        .catch((error) => {
          this.getTableData()
          Message.error(error)
        })
    },
    // 运行一次
    runRow (id) {
      TaskListApi.run(id)
        .then((res) => {
          if (!res.code) {
            this.getTableData()
            this.$Notice.success({
              title: '运行成功!'
            })
          } else {
            this.getTableData()
            this.$Notice.error({
              title: res.message
            })
          }
        })
        .catch((error) => {
          this.getTableData()
          Message.error(error)
        })
    },
    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 显示新建弹窗
    showCreateModal () {
      this.modal.task.type = 'create'
      this.modal.task.title = '新建'
      this.modal.task.formData = {}
      this.modal.task.isShow = true
    },
    oneMonth () {
      const dates = new Date()
      dates.setMonth(dates.getMonth() - 1)
      let pastMonth = dates.getMonth() + 1
      let pastDay = dates.getDate()
      if (pastMonth >= 1 && pastMonth <= 9) {
        pastMonth = '0' + pastMonth
      }
      if (pastDay >= 0 && pastDay <= 9) {
        pastDay = '0' + pastDay
      }
      const endDate = dates.getFullYear() + '-' + pastMonth + '-' + pastDay
      return endDate
    },
    nowDate () {
      const loadYear = new Date().getFullYear()
      let loadMonth = new Date().getMonth() + 1
      let loadDay = new Date().getDate()
      if (loadMonth >= 1 && loadMonth <= 9) {
        loadMonth = '0' + loadMonth
      }
      if (loadDay >= 0 && loadDay <= 9) {
        loadDay = '0' + loadDay
      }
      const date = loadYear + '-' + loadMonth + '-' + loadDay
      return date
    },
    // 显示修改弹窗
    showUpdateModal (row) {
      this.modal.task.type = 'update'
      this.modal.task.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.mallAdvertising.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      this.modal.task.id = row.id
      this.modal.task.formData = row
      this.modal.task.isShow = true
    },
    // 六级联动数据获取
    childByValue (data) {
      let area = this.queryData
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.strtid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    }
  }
}
</script>
